 <template>
  <div>
    <!-- 选择课程 -->
    <el-dialog title="邀约用户" :visible.sync="dialogVisible" width="60%">
      <div>
        <h3 style="margin: 10px 0;">当前选择课程为{{courseList[courseIndex].name}}</h3>
        <el-input
          type="textarea"
          rows="4"
          v-model.trim="phoneNumber"
          clearable
          placeholder="录入内测用户手机号（手机号用“, ”隔开）"
        ></el-input>
      </div>
      <div slot="footer">
        <el-button
          class="filter-item add-style"
          style="margin-left: 10px;"
          type="primary"
          @click="handleCreate"
          size="mini"
        >添加</el-button>
      </div>
    </el-dialog>

    <el-dialog title="创建结果" :visible.sync="resultVisible" width="60%">
      <div>
        <div>
          <h3>号码已存在</h3>
          <div>
            <span v-if="resultData.existPhones.length === 0">无</span>
            <span v-for="(item, index) in resultData.existPhones" :key="index">{{item}}</span>
          </div>
        </div>
        <hr>
        <div>
          <h3>用户不存在</h3>
          <div>
            <span v-if="resultData.noneUser.length === 0">无</span>
            <span v-for="(item, index) in resultData.noneUser" :key="index">{{item}}</span>
          </div>
        </div>
        <hr>
        <div>
          <h3>号码已添加</h3>
          <div>
            <span v-if="resultData.successPhones.length === 0">无</span>
            <span v-for="(item, index) in resultData.successPhones" :key="index">{{item}}</span>
          </div>
        </div>
      </div>
      <div slot="footer">
        <el-button
          class="filter-item add-style"
          style="margin-left: 10px;"
          type="primary"
          @click="resultVisible = false"
        >关闭</el-button>
      </div>
    </el-dialog>

    <!-- 已配置内测用户 -->
    <div class="filter-container">
      <el-select v-model="courseIndex" @change="changeCourse" placeholder="请选择课程">
        <el-option
          v-for="(item, index) in courseList"
          :key="item.id"
          :label="item.name"
          :value="index"
        ></el-option>
      </el-select>
      <el-input
        placeholder="用户名/电话/内测课程"
        v-model="searchData"
        style="width: 200px;"
        class="filter-item"
      />

      <el-button
        class="filter-item add-style"
        type="primary"
        icon="el-icon-search"
        @click="search"
      >搜索</el-button>

      <div>
        <el-button
          class="filter-item add-style"
          style="margin: 10px;"
          type="primary"
          size="mini"
          icon="el-icon-circle-plus-outline"
          @click="dialogVisible = true"
        >添加</el-button>
        <el-button
          size="mini"
          class="filter-item"
          style="margin-left: 10px;"
          type="danger"
          icon="el-icon-delete"
          @click="deleteRows"
        >取消已选择用户内测</el-button>
      </div>
    </div>

    <tTable :columns="columns" :data="tableData" @handleSelectionChange="handleSelectionChange">
      <!-- 操作 -->
      <template v-slot:operate="slotProps">
        <el-button @click.native.prevent="deleteRow(slotProps.scope.row.id)" type="danger" size="mini">取消内测</el-button>
      </template>
    </tTable>

    <Pagination :total="total" @handleChange="handleChange"/>
  </div>
</template>

<script>
import {
  createInternalAccount,
  getInternalAccount,
  deleteInternalAccount
} from "api/user";
import { getAllCourse } from "api/course";

import Pagination from "src/components/pagination";
import tTable from "src/components/table/index.vue";

export default {
  data() {
    return {
      phoneNumber: "", //输入得手机号码
      courseIndex: 0, //当前选择得课程得序号
      courseName: "", // 课程名称
      dialogVisible: false, // 是否显示添加模态框
      tableData: [], // 内测用户数据
      searchData: "", //搜索数据
      courseList: [{ name: "" }], // 课程列表
      multipleSelection: "", // 多选
      resultVisible: false, // 结果显示页面
      resultData: {
        existPhones: [],
        noneUser: [],
        successPhones: []
      }, // 添加结果
      isSearch: false,

      // 分页参数
      total: -1,

      columns: [
        {
          attr: { label: "", type: "selection", width: "55" }
        },
        {
          attr: { label: "", type: "index", width: "55" }
        },
        {
          attr: { prop: "name", label: "用户名" }
        },
        {
          attr: { prop: "phone", label: "电话" }
        },
        {
          attr: { prop: "courseName", label: "内测课程"}
        },
        {
          slot: "operate",
          attr: { label: "操作", width: "220" }
        }
      ]
    };
  },
  mounted() {
    this.getCourse();
  },
  components: { Pagination, tTable },
  methods: {
    deleteRow: function(id) {
      this.$confirm("确认删除内测用户么").then(_ => {
        deleteInternalAccount(id).then(res => {
          this.getData();
          this.$message.success("删除成功");
        });
      });
    },
    deleteRows() {
      this.$confirm("确认删除内测用户么").then(_ => {
        this.multipleSelection.map(item => {
          deleteInternalAccount(item.id);
          this.$message.success("删除成功");
          this.getData();
        });
      });
    },
    search: function() {
      this.getData(1, this.searchData);
      this.isSearch = true;
    },
    handleCreate: function() {
      let id = this.courseList && this.courseList[this.courseIndex].id;
      var data = {
        courseId: id,
        phones: this.phoneNumber
      };
      createInternalAccount(data).then(res => {
        if (res.existPhones.length === 0 && res.noneUser.length === 0) {
          this.$message.success("创建成功");
        } else {
          this.resultVisible = true;
          this.resultData = res;
        }

        this.dialogVisible = false;
        this.getData();
        this.phoneNumber = "";
      });
    },
    getData(pageNumber, searchData) {
      let id = this.courseList && this.courseList[this.courseIndex].id;

      getInternalAccount(id, pageNumber, searchData).then(res => {
        this.total = res.totalElements;
        this.tableData = res.content;
      });
    },
    getCourse(pageNumber) {
      getAllCourse(pageNumber).then(res => {
        this.courseList = res;
        this.getData(); // 进入页面后才能获取课程id，再根据课程id查询内测用户
      });
    },
    handleChange: function(pageNumber) {
      if (this.isSearch) {
        this.getData(pageNumber, this.searchData);
      } else {
        this.getData(pageNumber);
      }
    },
    // 课程更改
    changeCourse: function(index) {
      this.getData(); // 进入页面后才能获取课程id，再根据课程id查询内测用户
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
</style>
